/**
 * Created by GYL on 2018/7/25
 */
/* eslint-disable */
import React, { Component } from 'react';
import { Carousel, Col, Divider, Slider, InputNumber, Icon, DatePicker, Button, message, Tooltip, PageHeader, Descriptions } from 'antd';
import style from './Cockpit.less';
import request from '../../utils/request';
import moment from 'moment';
import MybarRight from './Echarts/MybarRight';//环保排放
import MybarRightTwo from './Echarts/MybarRightTwo';//项目产能

import MyLineRight from './Echarts/MyLineRight';//环保排放

import Echarts_tu from './Echarts/Echarts_tu';
const ButtonGroup = Button.Group;
var map,infoWindow ,marker
class Cockpit extends Component {

    constructor(props) {
        super(props)
        this.state = {

        }

    }


    componentDidMount() {
        this.initThree()
        // function getTime() {
        //     let data = new Date()
        //     let hour = data.getHours() < 10 ? "0" + data.getHours() : data.getHours();
        //     let minutes = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes();
        //     let seconds = data.getSeconds() < 10 ? "0" + data.getSeconds() : data.getSeconds();
        //     let time = hour + ":" + minutes + ":" + seconds;
        //     document.getElementById('clock').innerHTML = moment().format("YYYY年MM月DD日") + time;
        //     setTimeout(getTime, 1000);
        // }
        // getTime();
    }
    


    onLingo = () => {
        // clearInterval(timerTwo)
        let t = this;
        t.props.history.push({pathname: 'App/RealTime'});
    }

    initThree = (str) => {
        map = new AMap.Map("container", {
            resizeEnable: true,
            mapStyle: 'amap://styles/a8fdec119d6af8ed151ae83c97eff4d6', //设置地图的显示样式
            zooms: [4, 18],//设置地图级别范围
            zoom: 13,
            center: [116.397428, 39.90923],
        });
        var markerContent = '' +
        '<div class="custom">' +
        '   <div class="cile" ></div>' +
        '   <div class="text" >清运公司</div>' +
        '</div>';
        var marker = new AMap.Marker({
            position: [116.397428, 39.90923],
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            // offset: new AMap.Pixel(-13, -30)
        });
    // 将 markers 添加到地图
    map.add(marker);

        // const clie = "./img/cile.png"
        // infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });

  
 
        //     var circleMarker = new AMap.CircleMarker({
        //       center:[116.397428, 39.90923],
        //       radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
        //       strokeColor:'#69E044',
        //       strokeWeight:0,
        //       strokeOpacity:0.5,
        //       fillColor:'#69E044',
        //       fillOpacity:1,
        //       zIndex:10,
        //       bubble:true,
        //       cursor:'pointer',
        //       clickable: true
        //     })
        //     circleMarker.setMap(map)
          
    }

    titleBtnxuan = () => {
       
    this.props.history.push({pathname: '/App/BackTarget'});
    }


    render() {

        return (

            <div className={style.wrap}>
                <div className={style.qiehuanshitu}><span style={{color:'#00DEFF',cursor:'pointer'}}>总览视图</span> <Divider type="vertical"  dashed={true}/> <span style={{color:'#BCBCBC',cursor:'pointer'}}>视频视图</span></div>

                 <div className={style.zhutizhanshi}>
                 <div className={style.zhutizhanshi_box}>
                    <div><span style={{fontSize:30,fontWeight:500}}>4</span>个</div>
                    <div style={{fontSize:10}}>项目公司</div>
                 </div>
                 <Divider type="vertical" />
                 <div className={style.zhutizhanshi_box}>
                 <div><span style={{fontSize:30,fontWeight:500}}>212</span>天</div>
                 <div style={{fontSize:10}}>连续安全运行</div>
                 </div>
                 <Divider type="vertical" />
                 <div className={style.zhutizhanshi_box}>
                 <div><span style={{fontSize:30,fontWeight:500}}>100</span>%</div>
                 <div style={{fontSize:10}}>环保达标率</div>
                 </div>
                 
                 </div>
                {/* <div style={{ position: 'absolute', color: '#70D7FF', left: '3.5%', top: '2.5%', backgroundImage: `url(${this.state.Cartu === 1 ? require('../../assets/titleBtn.png') : ''})` }} className={style.titleBtn1}>车辆视图</div>
                <div style={{ position: 'absolute', color: '#70D7FF', left: '14.2%', top: '2.5%', backgroundImage: `url(${this.state.Cartu === 2 ? require('../../assets/titleBtn.png') : ''})` }} className={style.titleBtn1}>水处理视图</div>
                <div style={{ position: 'absolute', color: '#70D7FF', right: '14.2%', top: '2.5%', backgroundImage: `url(${this.state.Cartu === 3 ? require('../../assets/titleBtn1.png') : ''})` }} className={style.titleBtn1}>视频视图</div>
                <div style={{ position: 'absolute', color: '#70D7FF', right: '3.5%', top: '2.5%', backgroundImage: `url(${this.state.Cartu === 4 ? require('../../assets/titleBtn1.png') : ''})` }} className={style.titleBtn1}>场区三维</div> */}

                <div onClick={this.onLingo} style={{ position: 'absolute', color: '#70D7FF', right: 0, top: '7%', cursor: 'pointer' }} className={style.titleBtnxuan}>进入系统</div>


                {/* <div className={style.tianqi} style={{ position: 'absolute', color: '#70D7FF', right: '61.5%', top: '5.3%', fontSize: 12 }} id="clock" ></div>
                <div className={style.tianqi} style={{ position: 'absolute', color: '#70D7FF', left: '61.5%', top: '5.3%', fontSize: 12 }}>浙江省杭州市 </div> */}


                {/* 左侧Echarts图表 */}
                <div className={style.boxL}>
                    {/* 左上图表 */}
                    <div className={style.boxL_t}  >
                        <p className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 项目能耗 </p>
                        <div className={style.Box} style={{alignItems:'center',justifyContent: 'center'}}>
                            <div className={style.Left_Box}>
                                <div  className={style.left_text1}><span style={{color:'#fff',fontSize:14}}>1323</span><br/><span>拉进贮存量(t)</span></div>
                                <div  className={style.left_text2}><span style={{color:'#fff',fontSize:14}}>2274</span><br/><span>垃圾处置量(t)</span></div>
                                <div  className={style.left_text3}><span style={{color:'#fff',fontSize:14}}>11</span><br/><span>异常报警(个)</span></div>
                                <div  className={style.left_text4}><span style={{color:'#fff',fontSize:14}}>1323</span><br/><span>环保达标率(%)</span></div>
                                <div  className={style.left_text5}><span style={{color:'#fff',fontSize:14}}>1323</span><br/><span>垃圾收运量(t)</span></div>
                                <div  className={style.left_text6}><span style={{color:'#fff',fontSize:14}}>1323</span><br/><span>垃圾进厂量(t)</span></div>
                                <div  className={style.left_text7}><span style={{color:'#fff',fontSize:28}}>1323</span><br/><span>综合指数</span></div>
                            </div>
                        </div> 


                    </div>
                    {/* 左中图表 */}
                    <div className={style.boxL_t} >
                        <p className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 项目产能 </p>
                        <div className={style.Box}>
                            <MybarRightTwo />
                        </div>
                    </div>
                    {/* 左下图表 */}
                    <div className={style.boxL_t} style={{ display: 'flex' }} >
                        <p className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 项目能耗 </p>
                        <div className={style.Box}>
                            <MyLineRight />
                        </div>

                    </div>
                </div>



                <div className={style.boxC} >
                    <div className={style.boxC_t} id="container" style={{ display: 'flex' }}>
                        {/* <Echarts_tu/> */}
                    </div>
                    <div style={{ height: '1%',position:'relative' }}>
                        <div className={style.boxC_btn}>
                            <div style={{fontSize:14,display:'flex',alignItems:'center',cursor:'pointer'}}><div style={{width:15,height:15,backgroundColor:'#69E044',borderRadius:'50%'}}></div>清能环保</div>
                            <div style={{fontSize:14,display:'flex',alignItems:'center',cursor:'pointer'}}><div style={{width:15,height:15,backgroundColor:'#05A8FC',borderRadius:'50%'}}></div>再生能源</div>
                            <div style={{fontSize:14,display:'flex',alignItems:'center',cursor:'pointer'}}><div style={{width:15,height:15,backgroundColor:'#B782F9',borderRadius:'50%'}}></div>维尔利</div>
                            <div style={{fontSize:14,display:'flex',alignItems:'center',cursor:'pointer'}}><div style={{width:15,height:15,backgroundColor:'#FF9A18',borderRadius:'50%'}}></div>清运公司</div>
                        </div>
                    
                    </div>
                    <div className={style.boxC_B} >
                        <div style={{ flex: 1 }} className={style.boxC_B_L}>
                            <div className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 项目概况 </div>

                            <div className={style.Box} >
                                <div style={{flex:1,color:'#00DEFF'}}>【项目名称】<span style={{color:'#fff'}}>绍兴市清能环保有限公司</span></div>
                                <div style={{flex:1,color:'#00DEFF'}}>【总投资额】<span style={{color:'#fff'}}>3.2亿元</span></div>
                                <div style={{flex:1,color:'#00DEFF'}}>【投产时间】<span style={{color:'#fff'}}>2016年12月</span></div>
                                <div style={{flex:1,color:'#00DEFF'}}>【处理类型】<span style={{color:'#fff'}}>生活垃圾</span></div>
                                <div style={{flex:1,color:'#00DEFF'}}>【处置产能】<span style={{color:'#fff'}}>800吨/天</span></div>
                                <div style={{flex:1,color:'#00DEFF'}}>【项目地址】<span style={{color:'#fff'}}>浙江省绍兴市袍江工业区斗门镇荷湖村</span></div>
                            </div>
                        </div>
                        <div style={{ width: '1%' }}></div>
                        <div style={{ flex: 1 }} className={style.boxC_B_L}>
                            <p className={style.Title} style={{marginBottom:3}}> <Icon type="double-right" color="#70D7FF" /> 项目概览 </p>

                            <div className={style.Box} >
                                <div className={style.jiatu}>
                                    <div className={style.jiatu_title}>
                                        <img src={require("../../assets/fangda.png")}  />
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>



                {/* 右侧展示区域 */}
                {/* 右上 */}
                <div className={style.boxR}>
                    <div className={style.boxL_t}  >
                        <p className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 监测预警 </p>
                        <div className={style.Box}>
                            <div className={style.Box_T}>
                                <span>全部</span>
                                <Divider type="vertical" dashed={true} />
                                <span>清能环保</span>
                                <Divider type="vertical" dashed={true} />
                                <span>再生资源</span>
                                <Divider type="vertical" dashed={true} />
                                <span>维尔利</span>
                                <Divider type="vertical" dashed={true} />
                                <span>清运公司</span>
                                <Divider type="vertical" dashed={true} />
                                <span>更多<Icon type="double-right" color="#70D7FF" /></span>
                            </div>
                            <div className={style.Box_B}>
                            <div className={style.Box_B_C} style={{ color: '#fff',overflow:'auto' }}>
                                    <div className={style.Box_B_C_t}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img style={{height:'60%',width:'60%'}}  src={require('../../assets/hong.png')}/>
                                    </div>

                                    <div style={{ flex: 5, display: 'flex', flexDirection: 'column', borderBottom: '1px solid rgba(4,53,93,1)' }}>
                                        <div className={style.Box_B_C_title}>【数据超上限报警】 <span style={{ float: 'right', color: '#70D7FF' }}>8-17 15:02</span></div>
                                        <div>【清能环保】   <span style={{ color: '#70D7FF' }}>#2锅炉炉膛超上限</span></div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '50%', borderColor: 'rgba(203, 203, 203, 0.4)' }} />
                                    <div className={style.Box_B_C_t} style={{justifyContent:'space-around'}}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img src={require("../../assets/xiangqing.png")}  />
                                        {/* <Divider type="vertical" dashed={true} /> */}
                                        <img src={require("../../assets/tingzhi.png")}  />
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                    </div>

                                </div>
                                <div className={style.Box_B_C} style={{ color: '#fff' }}>
                                    <div className={style.Box_B_C_t}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img style={{height:'60%',width:'60%'}}  src={require('../../assets/hong.png')}/>
                                    </div>

                                    <div style={{ flex: 5, display: 'flex', flexDirection: 'column', borderBottom: '1px solid rgba(4,53,93,1)' }}>
                                        <div className={style.Box_B_C_title}>【数据超上限报警】 <span style={{ float: 'right', color: '#70D7FF' }}>8-17 15:02</span></div>
                                        <div>【清能环保】   <span style={{ color: '#70D7FF' }}>#2锅炉炉膛温上限</span></div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '50%', borderColor: 'rgba(203, 203, 203, 0.4)' }} />
                                    <div className={style.Box_B_C_t} style={{justifyContent:'space-around'}}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img src={require("../../assets/xiangqing.png")}  />
                                        {/* <Divider type="vertical" dashed={true} /> */}
                                        <img src={require("../../assets/tingzhi.png")}  />
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                    </div>

                                </div>
                                <div className={style.Box_B_C} style={{ color: '#fff' }}>
                                    <div className={style.Box_B_C_t}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img style={{height:'60%',width:'60%'}}  src={require('../../assets/hong.png')}/>
                                    </div>

                                    <div style={{ flex: 5, display: 'flex', flexDirection: 'column', borderBottom: '1px solid rgba(4,53,93,1)' }}>
                                        <div className={style.Box_B_C_title}>【数据超上限报警】 <span style={{ float: 'right', color: '#70D7FF' }}>8-17 15:02</span></div>
                                        <div>【清能环保】   <span style={{ color: '#70D7FF' }}>#2锅炉炉膛超上限</span></div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '50%', borderColor: 'rgba(203, 203, 203, 0.4)' }} />
                                    <div className={style.Box_B_C_t} style={{justifyContent:'space-around'}}>
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                        <img src={require("../../assets/xiangqing.png")}  />
                                        {/* <Divider type="vertical" dashed={true} /> */}
                                        <img src={require("../../assets/tingzhi.png")}  />
                                        {/* <Icon type="double-right" color="#70D7FF" /> */}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 右中 */}
                    <div className={style.boxL_t} >
                        <p className={style.Title}> <Icon type="double-right" color="#70D7FF" /> 环保排放 </p>

                        <div className={style.Box}>
                            <MybarRight />
                        </div>



                    </div>
                    {/* 右下 */}
                    <div className={style.boxL_t} >
                        <p className={style.Title}  style={{marginBottom:3}}> <Icon type="double-right" color="#70D7FF" /> 项目视频 </p>

                        <div className={style.Box}>
                            <div className={style.jiashiping}>
                                    <div className={style.jiatu_title}>
                                        <div style={{width:150,paddingLeft:10}}>摄像头1 <Icon type="down" /></div>
                                        <span>更多 <Icon type="double-right" /></span>
                                    </div>
                                    <div className={style.shexiang}>
                                        <div>摄像头1</div>
                                        <div>摄像头2</div>
                                        <div>摄像头3</div>
                                        <div>摄像头4</div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>



        )
    }
}
export default (Cockpit);
